<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jExcel-类似Excel的jquery电子表格插件|DEMO4_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="dist/css/jquery.jexcel.css" type="text/css" />
	<style type="text/css">
		#my{
			width: 600px;
			margin: 50px auto;
		}
		.code{
			width: 800px;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>jExcel-类似Excel的jquery电子表格插件 <span>jQuery plugin to embed Excel Spreadsheet</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Table/201703084391.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
			<div class="htmleaf-demo center">
			  <a href="index.html">基本</a>
			  <a href="index2.html">CVS数据</a>
			  <a href="index3.html">带日期的表格</a>
			  <a href="index4.html" class="current">表格排序</a>
			  <a href="index5.html">下拉列表</a>
			</div>
		</header>
		<p style="text-align: center;">双击表格头进行排序</p>
		<div id="my"></div>
		<div class="code">
			<pre>
&lt;html&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;script src="http://cdn.bossanova.uk/js/jquery.jexcel.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="http://cdn.bossanova.uk/css/jquery.jexcel.css" type="text/css" /&gt;

&lt;div id="my"&gt;&lt;/div&gt;

&lt;script&gt;
data = [
    ['Mazda', 2001, 2000, '2006-01-01'],
    ['Pegeout', 2010, 5000, '2005-01-01'],
    ['Honda Fit', 2009, 3000, '2004-01-01'],
    ['Honda CRV', 2010, 6000, '2003-01-01'],
];

$('#my').jexcel({
    data:data,
    colHeaders: ['Model', 'Price', 'Price', 'Date'],
    colWidths: [ 300, 80, 100, 100 ],
    columns: [
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
    ]
});
&lt;/script&gt;
&lt;/html&gt;				
			</pre>
		</div>
	</div>

	
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script type="text/javascript" src="dist/js/jquery.jexcel.js"></script>
	<script type="text/javascript">
		data = [
		    ['Mazda', 2001, 2000, '2006-01-01'],
		    ['Pegeout', 2010, 5000, '2005-01-01'],
		    ['Honda Fit', 2009, 3000, '2004-01-01'],
		    ['Honda CRV', 2010, 6000, '2003-01-01'],
		];

		$('#my').jexcel({
		    data:data,
		    colHeaders: ['Model', 'Price', 'Price', 'Date'],
		    colWidths: [ 300, 80, 100, 100 ],
		    columns: [
		        { type: 'text' },
		        { type: 'text' },
		        { type: 'text' },
		        { type: 'text' },
		    ]
		});
	</script>
</body>
</html>